<template>
  <el-table :data="data">
    <el-table-column v-for="col in columns" :key="col.name" :prop="col.name" :label="col.label"> </el-table-column>

    <el-table-column fixed="right" label="操作" :width="options.length * 70">
      <template v-slot="{ row }">
        <el-button v-for="opt in options" :key="opt.name" @click.native.prevent="onOption(opt.name, row)" :type="opt.type" size="mini">
          {{ opt.label }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  computed: {},
  watch: {},
  methods: {
    onInit(opt, row) {
      console.log(opt)
      console.log(row)
      this.$emit('init', opt, row, this.data)
    },
    onOption(opt, row) {
      console.log(opt)
      console.log(row)
      this.$emit('option', opt, row, this.data)
    }
  }
}
</script>
